<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0px;
        }

        .btn {
            position: absolute;
            top: 130px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button class="btn">点击动画</button>

    <script>
        let box = document.querySelector(".box");
        let btn = document.querySelector(".btn");

        btn.onclick = () => {
            bian(box, { width: 1200, height: 300 })
        }


        let bian = (box, arr, e) => {
            let cishu = 0;
            for (let a in arr) {
                cishu++;
                let speed;
                clearInterval(box[a])
                box[a] = setInterval(() => {
                    // console.log(arr[a])
                    // let ba = box.style[a]
                    // console.log(ba)
                    let le = parseInt(window.getComputedStyle(box)[a])
                    // let b = Object.keys(a)
                    speed = Math.ceil((arr[a] - le) / 10);
                    le = le + speed;
                    // console.log(le)
                    if (le == arr[a]) {
                        clearInterval(box[a]);
                        cishu--;
                        if (cishu == 0) {
                            box.style.background = "green"
                        }

                    }
                    // box.style[a] = arr[a] + "px"

                    box.style[a] = le + "px"

                }, 50)
            }
        }

    </script>

</body>

</html>